/*
  学习目标：使用useEffect发请求获取数据
  0: 下包、 封装request.js
*/

import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from './api/channel';

export default function App() {
  // 1. 声明数据
  const [list, setList] = useState([]);

  async function loadData(params) {
    const res = await getChannelsAPI();
    // 4. 保存数据，渲染界面
    setList(res.data.channels);
  }
  // 3. 挂载后发情求,
  useEffect(() => {
    loadData();
  }, []);

  return (
    <div>
      {list.map((item) => (
        <h3 key={item.id}>{item.name}</h3>
      ))}
    </div>
  );
}
